<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ include file="taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${path}/static/bootstrap-3.3.7-dist/css/bootstrap.css"/>

<link rel="stylesheet" href="${path}/static/layui/css/layui.css" media="all">
</head>
<body>
<%-- 	<c:forEach items="${list}" var="student"> --%>
<%-- 		${student.id}<br/> --%>
<%-- 		${student.name}<br/> --%>
<%-- 		${student.age}<br/> --%>
<%-- 		${student.gender}<br/> --%>
<%-- 	</c:forEach> --%>

	搜索
	<div class="demoTable">
	  <div class="layui-inline">
		ID：
	    <input name="id" id="searchId" autocomplete="off">
		名字：
	    <input name="name" id="searchName" autocomplete="off">
	         性别：
	    <input name="gender" id="searchGender" autocomplete="off">
	  </div>
	  <button class="layui-btn" data-type="reload">搜索</button>
	</div>
	
	
	<table id="tableId" lay-filter="tableFilter"></table>
	
	<script type="text/html" id="topToolbarId">
  		<div class="layui-btn-container">
    		<button class="layui-btn layui-btn-sm" lay-event="insert">添加</button>
    		<button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
 	 	</div>
	</script>
	
	<script type="text/html" id="toolbarId">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
<!-- 	<script type="text/html" id="banjiNameTpl"> -->
<%--   		<a href="${path}/banji/getBanjiInfo.action?id={{d.banji.id}}" class="layui-table-link">{{d.banji.name}}</a> --%>
<!-- 	</script>  -->
	
	<script type="text/html" id="statusTpl">
		{{# if(d.status == 1){ }}
		在校
		{{# }else if(d.status == 2){ }}
		毕业
		{{# } }}
	</script>
	
	<script src="${path}/static/jquery-1.11.3.js"></script>
	<script src="${path}/static/layui/layui.js"></script>
	<script src="${path}/static/mylayer.js"></script>
	<script src="${path}/static/util.js"></script>
	
	<script>
	layui.use('table', function(){
		 // 只加载LayUI的table模块
	  var table = layui.table;
	  
	//第一个实例
	  table.render({
		  id:'tableReload'
	    ,elem: '#tableId'
	    ,toolbar: '#topToolbarId' //开启头部工具栏，并为其绑定左侧模板
	    ,height:550
	    ,url:'${path}/student/pageList.action' //数据接口
	    ,page: true //开启分页
	    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
		,cols: [[ //表头
			{type: 'checkbox', fixed: 'left'}
	     , {field:'id', title: 'ID', sort: true}
	      ,{field:'name', title: '用户名'}
	      ,{field:'age', title: '年龄', sort: true}
	      ,{field:'gender', title: '性别', sort: true}
	      ,{field:'birthday', title: '生日', sort: true}
	      ,{field:'status', title: '状态', templet:'#statusTpl'}
	      ,{field: 'banji', title: 'Banji',templet: '<div><a href="${path}/banji/getBanjiInfo.action?id={{d.banji.id}}" class="layui-table-link">{{d.banji.name}}</a></div>'}
// 	       ,{field: 'banji', title: 'Banji',templet: '#banjiNameTpl'}
	      ,{title:'操作', toolbar: '#toolbarId', fixed: 'right'}
	    ]]
	  });
	
	//头工具栏事件
	  table.on('toolbar(tableFilter)', function(obj){
	    var checkStatus = table.checkStatus(obj.config.id);
	    switch(obj.event){
	      case 'deleteAll':
	        var data = checkStatus.data;
// 	       	[{"id":40,"name":"zhansgan","age":34,"gender":"男"},{"id":41,"name":"admin","age":34,"gender":"女"}]
	       	var ids = [];// [1,2,3]
	       	for (var i in data) {
	       		ids.push(data[i].id);
	       	}
	       	ids = ids.join(','); // '1,2,3'
	       	layer.confirm('真的删除行么', function(index){
		    	  $.ajax({
		    		  url : "${path}/student/deleteAll.action",
		    		  data : {"ids" : ids},
		    		  dataType : "json",
		    		  type : "post",
		    		  success : function(jsonObj) {
		    			  if (jsonObj.code == util.SUCCESS) {
		    				  mylayer.successMsg(jsonObj.msg);
		    				  // 重新加载数据表格
		    				  table.reload("tableReload");
		    			  } else {
							  mylayer.errorMsg(jsonObj.msg);		    				  
		    			  }
		    		  }
		    	  });
		          layer.close(index);
		      });
	      break;
	      
	      
	      
	      case 'insert':
	    	  layer.open({
					type : 2,
					title : "添加信息",
					btn : ["关闭"],
					area : ["500px","300px"],
					content : "${path}/student/getInsertPage.action"
				});   
	      break;
	      
	      
	    };
	  });
	
	//监听行工具事件
	table.on('tool(tableFilter)', function(obj){
		var data = obj.data;
		console.log(obj)
		// {tr: jQuery.fn.init(3), data: {…}, del: ƒ, update: ƒ, event: "edit"}
		console.log(obj.data)
		// {id: 33, name: "superadmin", age: 99, gender: "女"}
		if(obj.event === 'del'){
			layer.confirm('真的删除行么', function(index){
				$.ajax({
					url : "${path}/student/deleteById.action",
					data : {"id" : data.id},
		    		  dataType : "json",
		    		  type : "post",
		    		  success : function(jsonObj) {
		    			  if (jsonObj.code == util.SUCCESS) {
		    				  mylayer.successMsg(jsonObj.msg);
		    				  // 重新加载数据表格
		    				  table.reload("tableReload");
		    			  } else {
							  mylayer.errorMsg(jsonObj.msg);		    				  
		    			  }
		    		  }
		    	  });
		          layer.close(index);
		      });
		    } else if(obj.event === 'edit'){
		       
		    	  layer.open({
						type : 2,
						title : "编辑信息",
						btn : ["关闭"],
						area : ["500px","300px"],
						content : "${path}/student/toUpdate.action?id=" + data.id
					}); 
		    }
	});
	
	var $ = layui.$, active = {
		    reload: function(){
		      
		      //执行重载
		      table.reload('tableReload', {
		        page: {
		          curr: 1 //重新从第 1 页开始
		        }
		        ,where: {
		        	// /pageList.action?page=1&limit=10&id=1064
		            id: $('#searchId').val(),
		            name: $('#searchName').val(),
		            gender: $('#searchGender').val()
		        }
		      }, 'data');
		    }
		  };
	
	$('.demoTable .layui-btn').on('click', function(){
	    var type = $(this).data('type');// data-type="reload"
	    active[type] ? active[type].call(this) : '';
	 });
	});
	</script>
	
</body>
</html>